<template>
  <div>
    <el-form ref="form" label-width="200px">
      <h2 style="text-align:center;">发布新测试</h2>

      <el-form-item label="测试标题" style="width: 900px">
        <el-input v-model="exam.title"></el-input>
      </el-form-item>
      <el-form-item label="测试描述">
        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="exam.description" style="width: 700px;">
        </el-input>
      </el-form-item>
      <el-form-item label="测试类型" style="width: 900px">
        <el-select v-model="exam.type">
          <el-option
            v-for="item in examType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="持续时间">
        <el-date-picker type="date" value-format="timestamp" placeholder="开始日期" v-model="exam.gmtStart" style="width: 332px;"></el-date-picker>
        ——
        <el-date-picker type="date" value-format="timestamp" placeholder="结束日期" v-model="exam.gmtEnd" style="width: 332px;"></el-date-picker>
      </el-form-item>
      <el-form-item label="测试限时（分钟）" style="width: 900px">
        <el-input v-model="exam.limitDuration"></el-input>
      </el-form-item>
      <el-form-item label="测试允许次数" style="width: 900px">
        <el-input v-model="exam.limitTime"></el-input>
      </el-form-item>
      <el-form-item label="测试题目">
        <el-button type="primary" @click="beginAddProblem">增加题目</el-button>
      </el-form-item>
      <div v-for="(problem,problemIndex) in problems" :key="problem.id">
        <div
          style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 80%;margin-left:10%;background-color: #efefef;height: 80px">
          <div style="margin-left: 20px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
            <div style="width: 200px">
              题目名称
            </div>
            <el-input v-model="problem.description" disabled></el-input>
            <div style="width: 200px;margin-left: 20px">
              题目分数
            </div>
            <el-input v-model="problem.criteria" disabled></el-input>
          </div>
          <div style="width: 300px;justify-content: flex-end;flex-direction: row;display: flex;margin-right: 20px">
            <el-button @click="removeProblem(problemIndex)" type="danger">删除</el-button>
            <el-button @click="upProblem(problemIndex)" v-if="problemIndex != 0" type="primary">上移</el-button>
          </div>
        </div>
      </div>

      <div
        style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20px;margin-bottom: 20px">
        <el-button type="primary" @click="saveExam">保存</el-button>
      </div>
    </el-form>
    <el-dialog title="题目编辑" :visible.sync="problemEditVisible">
      <el-form ref="form" label-width="80px">
        <el-form-item label="绑定方式" style="width: 630px;">
          <el-select v-model="problemBindWay" placeholder="选择题目来源">
            <el-option value="0" label="选择已有题目"></el-option>
            <el-option value="1" label="上传新题目"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="problemBindWay == 0" label="已有题目" style="width: 600px;margin-top: 20px">
          <el-select v-model="currentProblem" value-key="description" :remote-method="problemQuery"
                     :loading="loading"
                     filterable remote reserve-keyword placeholder="请输入关键词" style="width: 600px">
            <el-option
              v-for="item in problemQueryList" :key="item" :label="item.description" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <div v-else>
          <el-form-item label="题目描述" style="width: 600px;">
            <el-input v-model="problem.description"></el-input>
          </el-form-item>
          <el-form-item label="题目类型" style="width: 630px;">
            <el-select v-model="problem.type" placeholder="题目类型">
              <el-option value="0" label="单选题"></el-option>
              <el-option value="1" label="多选题"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目选项" style="width: 600px;">
            <el-button type="primary" @click="addOption()">添加选项</el-button>
            <div v-for="(option,index) in problem.options">
              <div
                style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-color: #efefef;height: 60px;border-radius: 10px;margin-top: 10px">
                <el-form-item label="选项内容" style="width: 600px;margin-bottom: 0">
                  <el-input v-model="option.content"></el-input>
                </el-form-item>
                <div style="width: 400px;justify-content: flex-end;flex-direction: row;display: flex;margin-right: 20px">
                  <el-button @click="removeOption(index)" type="danger">删除</el-button>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="题目id" style="width: 600px;" v-if="currentProblem">
            <el-input v-model="problem.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="正确答案" v-if="problem.type && problem.type == 0" style="width: 600px;">
            <el-select v-model="problem.answer" value-key="content" filterable placeholder="请输入关键词" style="width: 600px">
              <el-option
                v-for="(item,index) in problem.options" :key="item.content" :label="item.content" :value="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="正确答案" v-if="problem.type && problem.type == 1" style="width: 600px;">
            <el-select v-model="problem.answer" value-key="content" multiple filterable placeholder="请输入关键词" style="width: 600px">
              <el-option
                v-for="(item,index) in problem.options" :key="item.content" :label="item.content" :value="index">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item label="题目分值" v-if="currentProblem != null" style="width: 600px;">
          <el-input v-model="currentProblem.criteria"></el-input>
        </el-form-item>

        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 20px">
          <el-button type="primary" v-if="currentProblem == null && problemBindWay == 1" @click="saveProblem()">上传题目</el-button>
          <el-button type="primary" v-else @click="addProblem()">保存题目</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      problemEditVisible:false,
      loading:false,


      exam: {},
      problems: [],


      problemBindWay: "",
      currentProblem: null,

      problemType: ["单选题", "多选题"],
      examType: [
        {label:"单元测试",value:0},
        {label:"期末测试",value:1}
      ],
      problemQueryList: [],
      problem: {
        description: "",
        options: [],
        answer: null
      },

    }
  },
  mounted() {
    if(this.$route.params&&this.$route.params.id){
      this.getExamInfo(this.$route.params.id)
    }
  },
  methods: {
    getExamInfo(examId){
      this.$api.getExamInfo({examId}).then(res=>{
        this.exam = res.data
        this.problems = this.exam.problems
      })
    },
    saveExam() {
      this.exam.problems = this.problems
      if(this.exam.id){
        this.$api.updateExam(this.exam).then(()=>{
          this.$message.success("成功")
        })
      }else {
        this.$api.saveExam(this.exam).then(()=>{
          this.$message.success("成功")
        })
      }
    },

    // 开始新增题目
    beginAddProblem(sectionIndex, sectionContentIndex) {
      this.currentSectionIndex = sectionIndex
      this.currentSectionContentIndex = sectionContentIndex
      this.problemEditVisible = true
    },
    // 题目查询
    problemQuery(description) {
      this.$api.listProblem({
        description
      }).then(response => {
        this.problemQueryList = response.data
      })
    },
    // 增加题目选项
    addOption() {
      this.problem.options.push({
        content: ""
      })
    },
    // 移除题目选项
    removeOption(index) {
      this.problem.options.splice(index, 1)
    },
    // 保存并获取题目信息
    saveProblem() {
      let answer = ""
      let options = []
      for (let i = 0; i < this.problem.options.length; i++) {
        if (this.problem.answer === i) {
          answer = answer + "1"
        } else {
          answer = answer + "0"
        }
        options.push(this.problem.options[i].content)
      }
      this.problem.answer = parseInt(answer, 2);
      this.problem.options = options


      this.$api.saveOrUpdateProblem(this.problem)
        .then(res => {
          this.$message.success("成功" + res.data)
          this.currentProblem = {
            type: 0,
            description: this.problem.description,
            id: res.data
          }
        })
      console.log(this.problem)
    },
    // 新增题目
    addProblem() {
      if (this.currentProblem == null) {
        this.$message.error("信息未完善！")
      }
      console.log(this.currentProblem)

      this.problems.push(this.currentProblem)

      this.currentProblem = null
      this.problemEditVisible = false
    },
    // 移除题目
    removeProblem(problemIndex) {
      this.problems.splice(problemIndex, 1)
    },
    // 上移题目
    upProblem(problemIndex){
      console.log("执行",problemIndex)
      let up = this.problems[problemIndex-1]
      this.problems[problemIndex-1] = this.problems[problemIndex]
      this.problems[problemIndex] = up
      this.$forceUpdate()
    }
  }
}
</script>

<style>

</style>
